<template>
  <a-modal
    title="進貨記錄詳情"
    :width="1256"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template>
                  <span>{{ v.customRender? v.customRender(model[v.key]) : model[v.key] }}</span>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { _getWarehouseInStoreRecord } from '@/api/warehouse'
    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            }
        },
        data () {
            this.formLayout = {
            }
            return {
                form: this.$form.createForm(this),
                fields: [
                  { key: 'name', label: '倉庫名稱' },
                  { key: 'personLiable', label: '負責人' }
                ],
                loading: false,
                selectList: {
                },
              data: [],
              columns: [
            {
              title: '入仓日期',
              dataIndex: 'arrivalDate',
              customRender: (data) => {
                return this.$options.filters.formatDate(data)
              }
            },
            {
              title: '供应商编号',
              dataIndex: 'supplierNo'
            },
            {
              title: '供应商名称',
              dataIndex: 'supplierName'
            },
            {
              title: '货品编号',
              dataIndex: 'goodsNo'
            },
            {
              title: '貨品類別',
              dataIndex: 'categoryName'
            },
            {
              title: '货品類型',
              dataIndex: 'goodsType',
              customRender: (data) => {
                if (data === 0) {
                  return '乾貨'
                } else {
                  return '蔬菜'
                }
              }
            },
            {
              title: '货品名称',
              dataIndex: 'goodsName'
            },
            {
              title: '貨品數量',
              dataIndex: 'realUnitCount'
            },
            {
              title: '貨品單位',
              dataIndex: 'unit'
            },
            {
              title: '貨品每件数量',
              dataIndex: 'piecesPerUnit'
            },
            {
              title: '貨品總數',
              dataIndex: 'totalCount'
            },
            {
              title: '到期日',
              dataIndex: 'expirationDate',
              customRender: (data) => {
                return this.$options.filters.formatDate(data)
              }
            },
            {
              title: '仓存位置',
              dataIndex: 'storePosition'
            },
            {
              title: '车牌',
              dataIndex: 'licensePlate'
            }
          ],
              visibleGoods: false,
              mdlGoods: null,
              idQuo: 0
            }
        },
        created () {
            // 防止表单未注册
            this.fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
            // 当 model 发生改变时，为表单设置值
            this.$watch('model', () => {
                this.model && this.form.setFieldsValue(pick(this.model, this.fields))
            })
          this.$watch('visible', (val) => {
            if (val) {
              _getWarehouseInStoreRecord(this.model.idWar).then((ret) => {
                for (var i = 0; i < ret.data.length; i++) {
                  ret.data[i]['totalCount'] = ret.data[i].realUnitCount * ret.data[i].piecesPerUnit
                }
                this.data = ret.data
              })
            }
          })
        },
        mounted () {
        },
        methods: {
            // handler
        }
    }
</script>
